/**
 * Created by fanweihua on 2016/12/2.
 */
import React from 'react';
import GridHtml from './gridHtml.js';

const Grid = React.createClass({
    getInitialState: function () {
        return {
            html: GridHtml.html
        };
    },
    render(){
        return (
            <div className="Z_slideIn">
                <div className="page slideIn">
                    <div className="Z_content_code">
                        <div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
                    </div>
                </div>
                <div className="Z_content">
                    <div className="Z_panel-body-backgound">
                        <GridNav></GridNav>
                    </div>
                </div>
            </div>
        )
    }
});
const GridNav = React.createClass({
    getInitialState: function () {
        return {
            imageSrc: '/bower_components/weui-master/example/images/icon_tabbar.png'
        };
    },
    render(){
        return (
            <div className="Z_panel-body">
                <div className="page__hd">
                    <h1 className="page__title">Grid</h1>
                    <p className="page__desc">九宫格</p>
                </div>
                <div className="weui-grids">
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                    <a href="javascript:;" className="weui-grid">
                        <div className="weui-grid__icon">
                            <img src={this.state.imageSrc} alt=""></img>
                        </div>
                        <p className="weui-grid__label">Grid</p>
                    </a>
                </div>
            </div>
        );
    }
});
module.exports = Grid;